<template>
  <el-container class="index-page">
    <index-header/>
    <el-main class="index-body">
      <index-image/>
      <div class="course-list-body">
        <div class="control-area clearfix">
          <div class="type-tab">
            <div class="type-item">
              <router-link to="#"
                           class="link"
                           style="
                           color: #7691fc;
                           border-bottom: 3px solid #7691fc;">我的课程
              </router-link>
            </div>
            <div class="type-item">
              <router-link to="#"
                           class="link"
                           style="padding-left: 20px;color: #444444">老师
              </router-link>
            </div>
          </div>
          <router-link to="#" class="calendar-entry">
            <i class="el-icon-date"></i>
            <span>日历</span>
          </router-link>
          <div class="pull-right">
            <div class="input-search-group">
              <input type="text"
                     class="text-input text-input-gray"
                     v-model="pagination.name"
                     placeholder="搜索课程"/>
              <i @click="search" class="el-icon-search glyphicon glyphicon-search"></i>
            </div>
            <button class="button button-red-solid button-radius"
                    @click="create">创建班课
            </button>
<!--            <button class="button button-red-solid button-radius"-->
<!--                    style="margin-left: 4px">激活教材-->
<!--            </button>-->
          </div>
        </div>
        <!--        router配置中有linkActiveClass这样一个属性，用于规定当某一路由被选中或页面处在某路由时，-->
        <!--        添加了该路由的<routerLink>元素将自动添加指定class。-->
        <div class="type-tab-2">
          <div class="type-item-2">
            <a class="link" :class="{active: isActive == 1}"
               @click="change('1',changed.total)">全部
            </a>
          </div>
          <div class="type-item-2 type-item-2-2">
            <a class="link" :class="{active: isActive == 2}"
               @click="change('2',changed.ongoing)">进行中
            </a>
          </div>
          <div class="type-item-2 type-item-2-2">
            <a class="link" :class="{active: isActive == 3}"
               @click="change('3',changed.ending)">已结束
            </a>
          </div>
        </div>
        <div class="course-list-area" style="position: relative">
          <div class="self-course-list clearfix">
            <div class="course-item-wrapper col-sm-3 col-xs-12" v-for="item in pageData">
              <div class="course-item clearfix" @click="course(item)">
                <div class="course-cover col-sm-12 col-xs-5">
                  <div class="cover-wrapper">
                    <img class="cover"
                         :src="item.image"/>
                  </div>
                  <el-dropdown class="course-control">
                      <span class="el-dropdown-link glyphicon glyphicon-option-horizontal">
                        <i class="el-icon-more-outline el-icon--right"></i>
                      </span>
                    <el-dropdown-menu slot="dropdown" class="course-control-menu">
                      <el-dropdown-item class="control-item-wrap">课程档案
                      </el-dropdown-item>
                      <el-dropdown-item class="control-item-wrap">结束课程
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="course-info col-sm-12 col-xs-7">
                  <div class="title">{{ item.courseName }}</div>
                  <div class="student-num">
                    <span>教师:</span>
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="learning-progress">
                    <span>{{ item.classes }}</span>
                    <!--                    <span v-bind="item.classes"></span>-->
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 1170px;clear: both"></div>
          </div>

          <div class="course-list-pagination-wrapper">
            <empty v-show="!showPageData" info="暂无课程"/>
            <el-pagination v-show="showPageData"
                class="course-list-pagination pagination-wrap"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pagination.page"
                :page-size="pagination.pageSize"
                layout="prev,pager,next, jumper"
                :total="pagination.counts">
            </el-pagination>

          </div>
        </div>

      </div>

    </el-main>
    <index-footer/>
  </el-container>
</template>

<script>
import IndexHeader from "@/components/headers/IndexHeader";
import IndexImage from "@/components/headers/IndexImage";
import IndexFooter from "@/components/footer/IndexFooter"
import Empty from '@/views/common/course/component/Empty'
import {teaCoursePage} from "@/apis/teacher";



export default {
  name: "studentIndex",

  components: {
    IndexImage,
    IndexHeader,
    IndexFooter,
    Empty,
  },
  data() {
    return {
      isActive: 1,
      currentPage: 1,
      pagination: {
        status: 1,
        pageSize: 15,
        page: 1,
        name: '',
        counts: 0,
        id: '',
      },
      showPageData: true,
      pageData: [],
      changed:{
        total: 1,
        ongoing: 2,
        ending: 3,
        changedN: 1,
      }
    }
  },
  created() {
    this.pagination.id = localStorage.getItem("id")

    this.init(1)
  },
  methods: {
    // 资源初始化
    async init(status) {
      this.pagination.status = status
      //学生课程分页查询
      teaCoursePage(this.pagination).then((resp) => {
        if(resp?.data?.code === 1){
          this.pageData = resp?.data?.data?.records
          this.pagination.counts = resp?.data?.data?.total
        }else{
          this.showPageData = false
          // this.$message.error(resp?.data?.msg)
        }

      })

    },
    // 分页菜单页码的改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.init(this.isActive)
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.init(this.isActive)
    },
    course(item){
      this.$router.push({
        path:'/course',
        query:{
          item: JSON.stringify(item),
        }
      }).catch(r => console.log(r))
    },


    // 跳转创建班级课程页面
    create() {
      this.$router.push({
        name: 'classes'
      }).catch(r => console.log(r))
    },


    // 全部、正在进行、已结束页面的切换
    change(i,status) {
      this.isActive = i
      this.init(status)
    },

    search() {
      this.init(1)
    },

  }
}
</script>

<style scoped>
.el-container {
  display: block;
}

.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  color: #333;
  text-align: center;
  background-color: #ffffff;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;

}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


*, :after, :before {
  box-sizing: border-box;
}

body html {
  font-size: 14px;
}

a {
  text-decoration: none;
  color: #337ab7;
}

a:active, a:hover {
  color: #337ab7;
  outline: 0;
}

.index-page .content-container {
  width: 1170px;
}

.index-page .index-header {
  display: inline-block;
  vertical-align: middle;
}

.index-page .index-body {
  padding-top: 60px;
}


.course-list-body {

  margin: auto;
  position: relative;
  max-width: 1170px;
}

.control-area {
  margin-bottom: 12px;
  padding: 20px 10px 0;
  border-bottom: 1px solid #e3e3e9;
  position: relative;
  text-align: left;
}

.type-tab {
  display: inline-block;
  line-height: 32px;
  font-size: 16px;
  vertical-align: middle;
}

.type-item {
  padding: 0 12px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
}

.calendar-entry {
  margin-left: 20px;
  line-height: 22px;
  /*vertical-align: middle;*/
  text-decoration: none;
}

.calendar-entry span {
  font-size: 16px;
  letter-spacing: 0;
}

.pull-right {
  float: right !important;
  margin-bottom: 12px;
}

.input-search-group {
  margin-right: 12px;
  width: 200px;
  border-radius: 999px;
  background-color: #efeff7;
  position: relative;
  display: inline-block;
  height: 32px;
  line-height: 30px;
  font-size: 14px;
  vertical-align: middle;
}

.text-input {
  padding-left: 16px;
  padding-right: 34px;
  background-color: transparent;
  border: none;
  min-width: 200px;
  max-width: 400px;
  height: 100%;
  line-height: 30px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.glyphicon {
  right: 10px;
  margin: auto;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 16px;
  font-size: 16px;
  color: #cbcbd1;
}

.button-red-solid {
  background-color: #7691fc;
  border-color: #7691fc;
  border-radius: 100px;
}

.type-tab-2 {
  padding: 0 10px;
  line-height: 24px;
  text-align: left;
}

.type-item-2 {
  padding: 0 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  display: inline-block;
  font-size: 14px;
}

.type-item-2-2:before {
  position: absolute;
  content: "|";
  color: #969696;
  font-size: 12px;
  left: -4px;
  float: left;
}

.type-item-2 .active {
  color: #7691fc;
}


.link {
  color: #969696;
  text-decoration: none;
}

.course-list-area {
  margin: auto;
  padding-top: 24px;
}

.course-item-wrapper {
  margin-bottom: 15px;
  padding: 0 10px;
  position: relative;
  float: left;
}

.col-sm-3 {
  width: 20%;
}

.course-item {
  background-color: #f8f8f8;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  transition: .3s;
}

.course-item:hover {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
}

.course-cover {
  padding: 0 0 56.25%;
  position: relative;
}

.cover-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cover {
  width: 100%;
  border: 0;
  vertical-align: middle;
}

.course-control {
  right: 6px;
  padding: 0 8px;
  background-color: rgba(0, 0, 0, .4);
  border-radius: 2px;
  cursor: pointer;
  position: absolute;
  top: 6px;

}

.glyphicon-option-horizontal {
  top: 1px;
  width: 14px;
  color: #fff;
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.course-control-menu {
  margin: 0;
  padding: 0;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
  position: absolute;
  z-index: 2;
  top: 26px;
}

.control-item-wrap {
  padding: 4px 10px;
  cursor: pointer;
  color: #969696;
}

::v-deep .el-icon--right {
  margin-left: 9px;
}

.course-info {
  padding: 10px;
  position: relative;
  height: 110px;
  float: left;
  width: 100%;
}

.title {
  height: 48px;
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: clip;
  text-align: left;
}

.student-num {
  padding-right: 6px;
  display: inline-block;
  line-height: 20px;
  font-size: 12px;
  color: #969696;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
  float: left;
}

.learning-progress {
  float: right;
  display: inline-block;
  max-width: 50%;
  line-height: 20px;
  font-size: 12px;
  color: #969696;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-list-pagination-wrapper {
  margin: 32px auto;
  text-align: center;
}

.course-list-pagination {
  float: none;
  margin: 0;
  display: inline-block;
}

.pagination-wrap a {
  color: #969696;
  margin: 0 5px;
  background: #fff;
  border: 1px solid #e3e3e9;
  width: 50px;
  font-size: 14px;
}

::v-deep .el-pager li:hover {
  color: #7691fc;
  border: 1px #7691fc solid;
}

::v-deep .el-pager li.active {
  color: #7691fc;
  border: 1px #7691fc solid;
}

.index-footer {
  position: relative;
}
</style>